<template>
  <div class="dialog">
        <div class="background" @click="giveUp()"></div>
        <div class="dialogdiv work">
            <label>禁用用户</label>
            <div class="message">
                <div class="perdiv">
                    <label><strong>禁用天数&nbsp;&nbsp;</strong></label>
                     <input id="days" value="1" type="number" max="100" min="1">
                </div>
                <div class="perdiv"></div>
                <div class="text">
                    <div class="textTop">
                        <label><strong>禁用原因</strong></label>
                    </div>
                    <div class="div">
                        <textarea id="reason" onkeydown="if(event.keyCode==13) return false;" oninput="this.style.height='0px';this.style.height=(this.scrollHeight+'px');" onpropertychange = "this.style.height=(this.scrollHeight+'px')"></textarea >
                    </div>
                </div>
                <div class="perdiv buttons">
                    <button class="yesbtn" @click="banuser()">禁用</button>
                    <button class="giveup" @click="giveUp()">取消</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    name: 'BanUserDialog',
    methods:{
        giveUp(){
            this.$store.state.dialog = 0
            document.getElementById("reason").value = ""
        },
        banuser(){
            axios.post(`http://123.57.251.41:8080/admin-user/banUser?id=${this.$store.state.banId}&reason=${document.getElementById("reason").value}&days=${document.getElementById("days").value}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                response =>{
                    console.log('禁用该用户成功了')
                    console.log(response.data.data.list)
                    this.$store.state.dialog = 0
                },
                error =>{
                    console.log(id)
                    alert("禁用该用户失败了",console.log(error))
                    this.$store.state.dialog = 0
                }
            )
        }
    }
}
</script>

<style lang="less" scoped>
.text{
    max-height: 350px !important;
}
textarea{
    cursor:text;
    width: 100%;
    padding: 10px;
    resize: none;
    font-size:13px; 
    font-family:Arial;
    line-height:20px;
    box-sizing: border-box;   
    max-height: 300px;
    overflow-y: auto;
}
</style>